import { useState, useEffect } from 'react';
import { Card, Menu, Tabs } from 'antd'
import UserInfoSet from '@/pages/account/settings/components/UserInfoSet';
import styles from './settings.less'
import Setsafe from '@/pages/account/settings/components/Setsafe';
import AccountBind from '@/pages/account/settings/components/AccountBind';

const { TabPane } = Tabs

export default function Page() {
  const [activeKey, setactiveKey] = useState("1") // 默认选中1

  useEffect(() => {

    return () => {

    }
  }, [])
  /**
   * 菜单选择
   * @param o {菜单回调 key}
   */
  const onSelect = (o: any) => {
    setactiveKey(o.key)
  }
  /**
   * tabs 菜单定制
   */
  const tabmenu = () => {
    return (
      <Menu
        style={{ width: 256 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        onSelect={onSelect}
      >
        <Menu.ItemGroup key="g1">
          <Menu.Item key="1">基本设置</Menu.Item>
          <Menu.Item key="2">安全设置</Menu.Item>
          <Menu.Item key="3">账号绑定</Menu.Item>
          {/* <Menu.Item key="4">消息通知</Menu.Item> */}
        </Menu.ItemGroup>
      </Menu>
    )
  }

  return (
    <div>
      <Tabs tabPosition="left" activeKey={activeKey} renderTabBar={tabmenu}>
        <TabPane key="1">
          <Card title="">
            <h3>基本设置</h3>
            <div className={styles.card_content}>
              <UserInfoSet />
            </div>
          </Card>
        </TabPane>
        <TabPane key="2">
          <Card title="">
            <h3>安全设置</h3>
            <div className={styles.card_content}>
              <Setsafe />
            </div>
          </Card>
        </TabPane>
        <TabPane key="3">
          <Card title="">
            <h3>账号绑定</h3>
            <div className={styles.card_content}>
              <AccountBind />
            </div>
          </Card>
        </TabPane>
        {/* <TabPane key="4">
          <Card title="">
            <h3>消息通知</h3>
          </Card>
        </TabPane> */}
      </Tabs>
    </div>
  )
}
